<template>
  <div class="flex-row autoGrow manageContainer inviteContainer">
    <choose-service-account
      :multiple="true"
      @serviceChange="serviceChange"
    >
    </choose-service-account>
    <div class="tableData flex-column autoGrow">
      <div class="subTitle">群数据</div>
      <table class="layui-table autoGrow">
        <colgroup>
          <col width="150">
          <col width="200">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>客服名称</th>
            <th>日期</th>
            <th>群名称</th>
            <th>群成员数</th>
            <th>退群人数</th>
            <th>发言人数</th>
            <th>发言比例</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="tableData.length">
            <tr v-for="(item, i) in tableData" :key="i">
              <td>{{item.serviceName}}</td>
              <td>{{item.date}}</td>
              <td>{{item.groupName}}</td>
              <td>{{item.groupMember}}</td>
              <td>{{item.dismissCount}}</td>
              <td>{{item.speakCount}}</td>
              <td>{{item.speakRatio}}%</td>
              <td class="operateRow">
                <span class="clickedSpan" @click="dismiss(item)">解散</span>
                <span class="clickedSpan" @click="decline(item)">屏蔽</span>
                <span class="clickedSpan" @click="sendMessage(item)">发信息</span>
              </td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import ChooseServiceAccount from '@/components/chooseServiceAccount'
import {mapMutations, mapState} from 'vuex'

export default {
  name: 'groupStatistic',
  data() {
    return {
      services: null,
    }
  },
  components: {
    ChooseServiceAccount
  },
  methods: {
    ...mapMutations(['changeGroupStatus','dismissGroup']),
    serviceChange(services) {
      this.services = services
    },
    decline(group) {
      this.changeGroupStatus({
        csid: group.csid,
        groupId: group.gid,
        data: {
          decline: true
        }
      })
    },
    dismiss(group) {
      this.dismissGroup({
        csid: group.csid,
        groupId: group.gid
      })
    },
    sendMessage(group) {
      this.$router.push({
        name: 'home',
        params: {
          group
        }
      })
    }
  },
  computed: {
    ...mapState(['messages']),
    tableData() {
      let data = []
      if (!this.services) return data
      this.services.map(s=>{
        const messages = this.messages[s.wxid] || []
        console.log(messages)
        const groups = messages
          .filter(m=>m.type=='group')
          .map(g=>{
            return {
              serviceName: s.name,
              csid: s.wxid,
              gid: g.wxid,
              date: '2019.09.12',
              groupName: g.name,
              groupMember: g.memberCount || 4421,
              dismissCount: 123,
              speakCount: 241,
              speakRatio: parseFloat(241/4421 * 100).toFixed(2),
            }
          })
        data = [...data, ...groups]
      })
      return data
    }
  }
}
</script>

